<script setup lang="ts">
import { Memo } from "@element-plus/icons-vue";
</script>

<template>
  <section class="total">
    <div>6月统计信息</div>
    <div>
      <div>
        <div class="bg1">
          <el-icon class="icon"> <Memo /> </el-icon>
        </div>
        <div>
          <div>500</div>
          <div>商品数量（个）</div>
        </div>
      </div>
      <div>
        <div class="bg2">
          <el-icon class="icon"> <Memo /> </el-icon>
        </div>
        <div>
          <div>20</div>
          <div>商品分类数量（个）</div>
        </div>
      </div>
      <div>
        <div class="bg3">
          <el-icon class="icon"> <Memo /> </el-icon>
        </div>
        <div>
          <div>121</div>
          <div>用户访问次数（次）</div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.total {
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  width: 75%;
  box-shadow: 0px 0px 5px 5px #e4e7ed;
  margin: 20px 20px 20px 0px;
}
.total > div:first-child {
  padding-left: 20px;
  line-height: 50px;
  border-bottom: 1px solid #e4e7ed;
}
.total > div:last-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}
.total > div:last-child > div {
  border: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  margin: 20px;
}
.total > div:last-child > div > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.total > div:last-child > div > div:last-child > div:first-child {
  font-size: 17px;
  font-weight: bold;
  margin: 0px 0px 20px 0px;
}
.total .icon {
  font-size: 90px;
  color: #ffffff;
}
.total .bg1 {
  background-color: #eead0e;
}
.total .bg2 {
  background-color: #ab82ff;
}
.total .bg3 {
  background-color: #63b8ff;
}
</style>
